<template>
    <div class="transform-setting">
        <div class="transform-setting-left">
            <h3>转换渠道</h3>
            <ul>
                <li
                    v-for="item in menuList"
                    :key="item.id"
                    :class="{ active: form.daren_channel_id == item.id }"
                    @click="handleActive(item.id)">
                    <img v-if="item.id == 21" class="el-image-icon" src="@/assets/icon/douyin-icon.png" />
                    <img v-else class="el-image-icon" src="@/assets/icon/kuaishou-icon.png" />
                    {{ item.label }}
                </li>
            </ul>
        </div>
        <div class="transform-setting-right">
            <!-- 开通显示设置表单 -->
            <template v-if="isOpen">
                <el-form ref="settingForm" class="open-setting-form" :model="form" :rules="rules" label-width="auto">
                    <el-form-item label="转换开关">
                        <el-switch
                            v-model="form.switch"
                            :active-value="1"
                            :inactive-value="2"
                            @change="clearValidate"></el-switch>
                        <span class="tip">最近90天内的订单才可转换积分</span>
                    </el-form-item>
                    <el-form-item class="money-points-item" label="积分规则" prop="moneyPoints">
                        订单实付金额每满
                        <el-form-item>
                            <el-form-item prop="money">
                                <el-input-number
                                    v-model="form.money"
                                    class="custom-number-input"
                                    placeholder="请输入"
                                    :precision="0"
                                    :max="99999999"
                                    :min="1"
                                    :controls="false"></el-input-number>
                            </el-form-item>
                        </el-form-item>
                        元，赠送
                        <el-form-item>
                            <el-form-item prop="points">
                                <el-input-number
                                    v-model="form.points"
                                    class="custom-number-input"
                                    placeholder="请输入"
                                    :precision="0"
                                    :max="99999999"
                                    :min="1"
                                    :controls="false"></el-input-number>
                            </el-form-item>
                        </el-form-item>
                        积分
                    </el-form-item>
                    <el-button v-auth="'EDIT_ORDER'" class="open-setting-form-submit" type="primary" @click="handleSave"
                        >保存</el-button
                    >
                </el-form>
            </template>
            <!-- 没有开通显示 -->
            <NotOpen v-else></NotOpen>
        </div>
    </div>
</template>

<script setup lang="tsx">
import { reactive, ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { setDarenRuleInfo, getDarenRuleInfo } from '@/api/member/pointsManage';
import { getWiseManRestCount } from '@/api/ecommerce/wiseManList';
import NotOpen from './notOpen.vue';
import lodash from 'lodash';

const form = reactive({
    daren_channel_id: 21,
    switch: 2, // 1开启、2关闭
    money: null, // 金额
    points: null // 赠送积分
});

const menuList = [
    { id: 21, label: '抖音达人' },
    { id: 22, label: '快手达人' }
];
const handleActive = val => {
    form.daren_channel_id = val;
    getSettingInfo();
};

const checkMoneyPoints = (rule, value, callback) => {
    callback();
};
// 校验金额
const checkMoney = (rule, value, callback) => {
    if (form.switch != 1) {
        return callback();
    }
    if (!form.money) {
        return callback(new Error('请填写金额'));
    }
    callback();
};
// 校验积分
const checkPoints = (rule, value, callback) => {
    if (form.switch != 1) {
        return callback();
    }
    if (!form.points) {
        return callback(new Error('请填写积分'));
    }
    callback();
};
const rules = computed(() => {
    const required = form.switch == 1;
    const ruleInfo = {
        moneyPoints: [{ required, validator: checkMoneyPoints }],
        money: [{ required, trigger: 'blur', validator: checkMoney }],
        points: [{ required, trigger: 'blur', validator: checkPoints }]
    };
    return ruleInfo;
});

// 重置验证
// const resetFields = () => {
//     nextTick(() => {
//         settingForm?.value?.resetFields();
//     });
// };
// 清空验证
const clearValidate = field => {
    setTimeout(() => {
        ['money', 'points'].forEach(item => {
            settingForm?.value?.clearValidate(item);
        });
    });
};
// // 校验验证
// const validateField = field => {
//     settingForm?.value?.validateField(field);
// };

// 人数接口
const isOpen = ref(false);
const getOpenInfo = async () => {
    // 获取人数判断是否开启，>0开启，否则关闭
    const res: any = await getWiseManRestCount({ source: 1 });
    isOpen.value = (res?.daren_num || 0) > 0;
};

// 获取设置信息
const getSettingInfo = async () => {
    if (!isOpen.value) {
        return;
    }
    const res = await getDarenRuleInfo({ daren_channel_id: form.daren_channel_id });
    Object.keys(form).forEach(key => {
        if (key == 'daren_channel_id') {
            return;
        }
        form[key] = res?.[key];
    });
    form.money = form.money || null;
    form.points = form.points || null;
    // Object.assign(form, res?.data);
};

const geyAllData = async () => {
    await getOpenInfo();
    getSettingInfo();
};
geyAllData();

// 保存接口
const settingForm = ref();
const handleSave = async () => {
    if (form.switch == 1 && (!form.money || !form.points)) {
        ElMessage.error('请设置积分规则~');
    }
    if (!settingForm.value) return;
    await settingForm.value.validate(async (valid, fields) => {
        if (valid) {
            const _form = lodash.cloneDeep({ ...form });
            _form.money = _form.money || 0;
            _form.points = _form.points || 0;
            await setDarenRuleInfo(_form);
            ElMessage.success('保存成功');
        }
    });
};
</script>

<style lang="scss" scoped src="./index.scss"></style>
